<template>
	<view>
		<!-- 导航栏 -->
		<u-navbar
			title="确认订单"
			:is-back="true"
			:title-bold="true"
			:background="background"
			title-color="#fff"
			:border-bottom="false"
		></u-navbar>

		<view class="content_box">
			<!-- 地址管理 -->
			<view class="address_big_box">
				<view class="address_box" @click="$refs.addressSelection.openPopup()">
					<view class="address_text_box" v-if="form.addressId">
						<view class="user_info">
							<text class="user_name">{{ addressInfo.contactName }}</text>
							<text class="user_tel">{{ addressInfo.contactPhone }}</text>
						</view>
						<view class="address_text">{{ addressInfo.address }}</view>
					</view>
					<text v-else>选择收货地址</text>
					<u-icon name="arrow-right" color="#888"></u-icon>
				</view>
				<view class="delivery_time">
					<text>配送时间</text>
					<text>11:00 - 12:00</text>
				</view>
			</view>

			<!-- 套餐列表 -->
			<view class="package_box">
				<view class="package_title">
					<text>宸坤美食</text>
					<u-line margin="20rpx" length="90%" />
				</view>
				<view class="package_list">
					<view class="item_box" v-for="(item, index) in comboReservationList" :key="index">
						<view class="left">
							<u-image width="120rpx" height="108rpx" :src="item.fileUrl" border-radius="12rpx"></u-image>
							<view class="info_box">
								<view class="info_name">{{ item.comboName }}</view>
								<view class="price_num_box">
									<text class="number">x {{ item.number }}</text>
									<text class="unit_price">¥ {{ item.comboPrice }}</text>
								</view>
							</view>
						</view>
						<view class="total_price_box">¥ {{ NP.times(item.number, item.comboPrice) }}</view>
					</view>
				</view>
			</view>

			<!-- 备注列表 -->
			<view class="remarks_box">
				<view class="remark">
					<text>备注</text>
					<u-input
						v-model="form.remark"
						type="text"
						:border="false"
						placeholder="描述你的备注"
						:clearable="false"
						:maxlength="15"
						input-align="right"
					/>
				</view>
				<view class="tableware_num" @click="show = true">
					<text>餐具数量</text>
					<view class="">
						<text style="color: #ff9900" v-if="form.tablewareNumber">{{ form.tablewareNumber }}</text>
						<text style="color: #ff9900" v-else>请选择</text>
						<u-icon name="arrow-right" color="#888"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 顶部悬浮 -->
		<view class="pay_big_box">
			<view class="pay_box">
				<view class="price">¥ {{ totalPrice }}</view>
				<view class="pay_btn">
					<u-button type="warning" size="medium" shape="circle" @click="onSubmit">立即下单</u-button>
				</view>
			</view>
		</view>

		<!-- 餐具选择 -->
		<u-picker
			mode="selector"
			v-model="show"
			:default-selector="defaultSelector"
			:range="selector"
			@confirm="confirm"
		></u-picker>

		<!-- 地址选择 -->
		<AddressSelection ref="addressSelection" @getAddress="getAddress" @getDefaultAddress="getDefaultAddress" />
	</view>
</template>

<script>
import AddressSelection from '@/components/AddressSelection'
import { wacOrder } from '@/api/order'
import NP from 'number-precision'

export default {
	components: {
		AddressSelection
	},
	data() {
		return {
			background: {
				backgroundColor: '#ff9900'
			},
			remark: '',
			src: 'http://www.wenhaixin.cn/1.jpg',
			show: false,
			selector: [1, 2, 3, 4],
			defaultSelector: [0],
			form: {
				addressId: null,
				remark: '',
				tablewareNumber: ''
			},
			addressInfo: {},
			comboReservationList: [],
			NP: NP
		}
	},
	computed: {
		totalPrice() {
			return this.comboReservationList.reduce((pre, next) => {
				return NP.plus(pre, NP.times(next.comboPrice, next.number))
			}, 0)
		}
	},
	onLoad() {
		uni.$on('comboReservationList', (res) => {
			console.log(res,"订餐美食")
			this.comboReservationList = res.comboReservationList
			this.form.comboReservationList = res.comboReservationList
			this.init(res.comboReservationList[0].number)
		})
	},
	onReady() {
		this.$refs.addressSelection.getDefaultAddress()
	},
	methods: {
		init(number) {
			let selector = []
			for (var i = 0; i < number + 2; i++) {
				selector.push(i + 1)
			}
			this.selector = selector
			this.defaultSelector = [number - 1]
			this.form.tablewareNumber = number
		},
		confirm(index) {
			this.form.tablewareNumber = this.selector[index]
		},
		getAddress(row) {
			this.form.addressId = row.id
			this.addressInfo = row
		},
		async onSubmit() {
			if (!!this.form.addressId == false) {
				this.showToast('请选择地址')
				return
			}

			if (!!this.form.tablewareNumber == false) {
				this.showToast('请选择餐具数量')
				return
			}

			await wacOrder(this.form)
			this.showToast('下单成功')
			uni.switchTab({
				url: '/pages/order/index'
			})
		},
		getDefaultAddress(info) {
			console.log('拿到了', info)
			this.addressInfo = info
			this.form.addressId = info.id
		}
	}
}
</script>

<style>
page {
	background-color: #eeeeee;
}
</style>

<style scoped lang="scss">
.pay_big_box {
	position: fixed;
	width: 100%;
	// height: 100rpx;
	// background-color: aqua;
	padding: 0 10rpx;
	left: 0;
	bottom: 0;
	padding-bottom: 0;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);

	.pay_box {
		height: 100rpx;
		width: 100%;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;
		border-radius: 100rpx;
	}
}
.content_box {
	padding: 25rpx 20rpx;

	.address_big_box {
		// height: 200rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 24rpx 28rpx;

		.address_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 36rpx;
		}

		.address_text_box {
			.user_info {
				font-size: 32rpx;
				display: flex;
				align-items: center;

				.user_tel {
					margin-left: 20rpx;
				}
			}

			.address_text {
				margin-top: 8rpx;
				font-size: 26rpx;
			}
		}

		.delivery_time {
			margin-top: 40rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.package_box {
		background-color: #fff;
		margin-top: 24rpx;
		// height: 400rpx;
		border-radius: 20rpx;
		padding: 24rpx 28rpx;

		.package_list {
			margin-top: 20rpx;

			.item_box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;

				.total_price_box {
					font-size: 32rpx;
				}

				.left {
					display: flex;
					align-items: center;

					.info_box {
						margin-left: 24rpx;

						.info_name {
							font-size: 28rpx;
						}

						.price_num_box {
							margin-top: 30rpx;

							.number {
								font-size: 26rpx;
								color: #888;
							}

							.unit_price {
								font-size: 28rpx;
								margin-left: 44rpx;
							}
						}
					}
				}
			}
		}
	}

	.remarks_box {
		margin-top: 24rpx;
		background-color: #fff;
		// height: 200rpx;
		border-radius: 20rpx;
		padding: 24rpx 28rpx;

		.remark {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.tableware_num {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 48rpx;
		}
	}
}
</style>
